<template>
    <!-- <div class="tombMain" :style="{background: form.gm_ex27 ? 'url('+form.gm_ex27+') 0% 0% / cover' : `url(${grave}) 0% 0% / 100% 100%` }"> -->
    <!-- <div class="tombMain" :style="{background: 'url('+form.gm_ex27+') 50% 50% / 99% 99% no-repeat #7d7272' }"> -->
    <!-- <div
        class="tombMain"
        :style="{ background: 'url(' + form.gm_ex27 + ') 50% 50% / 100vw 177vw no-repeat' }"
        @dblclick="showImagePreview([form.gm_ex27])"
    > -->
    <div
        class="tombMain"
        :style="{
            background: form.gm_ex27
                ? 'url(' + form.gm_ex27 + ') 50% 50% / 100% 100% no-repeat #7d7272'
                : `url(${grave}) 0% 0% / 100% 100% no-repeat #7d7272`,
        }"
    >
        <div>
            <div style="display: flex; justify-content: center">
                <div class="avatar">
                    <img :src="form.data[0].th_ex6" />
                </div>
                <div v-if="form.data[0].th_ex7" class="avatar">
                    <img :src="form.data[0].th_ex7" />
                </div>
            </div>
            <div style="display: flex; justify-content: center">
                <div class="name-text">
                    <div class="name-text-1">{{ form.data[0].th_ex4 }}</div>
                    <div class="name-text-1">1950-2025</div>
                </div>
                <div v-if="form.data[0].th_ex5" class="name-text">
                    <div class="name-text-1">{{ form.data[0].th_ex5 }}</div>
                    <div class="name-text-1">1950-2025</div>
                </div>
            </div>
            <div class="name-text-2">【 纪念厅 】</div>
            <div class="name-text-3">2030年12月1日</div>
            <div class="title-text">
                <div class="">思亲常望白云飞</div>
                <div class="">守孝不知落日红</div>
            </div>
        </div>
        <!-- 底部 -->
        <footer>
            <div class="tabbarItem" @click="open('prayShow', '')">
                <img src="@/assets/img/tomb/pray.png" />
                <div>祈福</div>
            </div>
            <div class="tabbarItem" @click="open('messageShow', '')">
                <img src="@/assets/img/tomb/message.png" />
                <div>留言</div>
            </div>
            <div class="tabbarItem" @click="open('friendShow', '')">
                <img src="@/assets/img/tomb/friend.png" />
                <div>亲友</div>
            </div>
        </footer>
        <!-- 设置 -->
        <div v-if="isSetShow" class="set" @click="open('setShow', '')">
            <img src="@/assets/img/tomb/set.png" />
        </div>
        <!-- 诚挚邀请 -->
        <div class="invite" @click="open('inviteShow', '')">
            <!-- <img src="@/assets/img/tomb/set.png" /> -->
            <div class="i-mingcute:invite-fill w-100% h-100% color-white"></div>
        </div>
        <!-- 导航 -->
        <div class="navigate" @click="open('navigateShow', '')">
            <!-- <img src="@/assets/img/tomb/set.png" /> -->
            <div class="i-ion:navigate w-100% h-100% color-white"></div>
        </div>
        <!-- 祈福 -->
        <van-popup
            v-model:show="prayShow"
            position="bottom"
            style="width: 100%; height: 50vh; background-color: #f7e5b7"
        >
            <div style="text-align: center">祈福</div>
            <div class="prayClass">
                <div v-for="(item, index) in gift" :key="'1' + index" class="prayItem" @click="saveGift(item)">
                    <img :src="item.thg_ex2" />
                    <div>{{ item.thg_ex1 }}</div>
                </div>
            </div>
        </van-popup>
        <!-- 礼物 -->
        <div class="list-dome-box">
            <div class="slide-wrapper">
                <div class="slide-container">
                    <div v-for="(item, index) in form.giftInfo" :key="'2' + index" class="slide-item">
                        <template v-if="item.thgi_ex1 == '留言'">
                            <img class="giftInfoImg1" :src="item.img ? item.img : defaultAvatar" />
                            <div class="giftInfoFont">{{ item.name }}{{ item.thgi_ex1 }}: {{ item.thgi_ex2 }}</div>
                        </template>
                        <template v-else>
                            <img class="giftInfoImg1" :src="item.img ? item.img : defaultAvatar" />
                            <div class="giftInfoFont">{{ item.name }}送了{{ item.thgi_ex1 }}</div>
                            <img class="giftInfoImg2" :src="item.thgi_url" />
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <!-- 留言 -->
        <van-popup
            v-model:show="messageShow"
            class="message-class"
            position="bottom"
            style="width: 100%; height: 50vh; background-color: #f7e5b7"
        >
            <div style="text-align: center">留言</div>
            <template v-for="(item, index) in form.giftInfo">
                <div v-if="item.thgi_ex1 == '留言'" :key="'3' + index" class="messageClass">
                    <img class="giftInfoImg1" :src="item.img ? item.img : defaultAvatar" />
                    <div class="messageContent">
                        <div style="color: #000a98">{{ item.name }} {{ item.thgi_dat1 }}</div>
                        <div class="messageGift">
                            <div>{{ item.thgi_ex2 }}</div>
                        </div>
                    </div>
                </div>
            </template>
            <div class="msgbox">
                <van-button block type="primary" class="msgPosition" @click="message2Show = true">选择留言</van-button>
                <van-popup
                    v-model:show="message2Show"
                    position="bottom"
                    style="width: 100%; height: 50vh; background-color: #f7e5b7"
                >
                    <van-button
                        v-for="(item, index) in msgtextArr"
                        :key="'6-' + index"
                        block
                        class="msgbtn"
                        @click="sendMsg2(item)"
                    >
                        {{ item }}
                    </van-button>
                </van-popup>
                <!-- <van-field v-model="msgValue" clearable placeholder="请输入留言" class="msgPosition">
					<template #button>
						<van-button size="small" type="primary" @click="sendMsg1(msgValue)">发送</van-button>
					</template>
				</van-field> -->
            </div>
        </van-popup>
        <!-- 亲友 -->
        <van-popup
            v-model:show="friendShow"
            position="bottom"
            style="width: 100%; height: 50vh; background-color: #f7e5b7"
        >
            <div class="friendClass">
                <div v-for="(item, index) in form.friend" :key="'4' + index" :class="['friendContent']">
                    <img :class="['friendImg']" :src="item.thu_ex3 ? item.thu_ex3 : defaultAvatar" />
                    <div class="friendFont">{{ item.thu_ex2 }}</div>
                </div>
            </div>
            <van-button
                block
                type="primary"
                style="
                    position: absolute;
                    bottom: 0;
                    background: rgb(94, 169, 241);
                    border: 1px solid rgb(94, 169, 241);
                "
                @click="open('modifyShow', 'friendShow')"
            >
                点击修改名称
            </van-button>
        </van-popup>
        <!-- 修改昵称 -->
        <van-popup v-model:show="modifyShow" round position="center" style="width: 80%; height: 60vh">
            <div class="modifyTitle">修改昵称</div>
            <van-form @submit="onSubmit1">
                <div style="width: 100%; text-align: center; display: flex; justify-content: center"></div>
                <van-field name="userurl" label="头像" center>
                    <template #input>
                        <van-uploader
                            v-model="fileList"
                            :before-delete="beforeDelete('user', 'userurl')"
                            :after-read="afterRead('user', 'userurl')"
                            max-count="1"
                        />
                    </template>
                </van-field>
                <van-field
                    v-model="form.user.username"
                    label-width="30vw"
                    name="username"
                    required
                    label="名称"
                    placeholder="请输入名称"
                />
                <div style="width: 60%; margin: 0 auto">
                    <van-button type="primary" block native-type="submit" style="margin-top: 10vw">保存</van-button>
                </div>
                <!-- <van-button block native-type="button">取消</van-button> -->
            </van-form>
        </van-popup>
        <!-- 设置 -->
        <van-popup v-model:show="setShow" position="center" style="width: 80%; height: 40vh">
            <van-cell-group style="margin-top: 10vw">
                <van-cell title="修改口令" is-link @click="open('modifyPwdShow', 'setShow')" />
            </van-cell-group>
        </van-popup>
        <!-- 诚挚邀请 -->
        <van-popup
            v-model:show="inviteShow"
            position="center"
            style="width: 80%; height: 80vh; background: rgba(255, 255, 255, 0.8); box-sizing: border-box; padding: 2vw"
        >
            <div class="invite-title">诚挚邀请</div>
            <div class="invite-text-1">各位乡亲、亲戚和朋友们:</div>
            <div class="invite-text-2">
                2030年12月1日(农历10月16日)是我父亲三周年祭日。三年前，我敬爱的父亲--逝者姓名，带着病痛、带着对人间的留恋，飘然离去。
            </div>
            <div class="invite-text-2">
                1月19日，我们将在家乡(地址)举办父亲的三周年祭奠，借此机会也向父亲生前所有关心、帮助、支持他的亲朋好友和专程前来参加父亲三周年祭拜活动的各位亲朋好友表示衷心的感谢!祝大家健康平安、幸福、吉祥!敬备薄酌恭候光临。
            </div>
            <div class="invite-text-2">长子(女)姓名叩首拜谢~</div>
        </van-popup>
        <!-- 导航 -->
        <van-popup
            v-model:show="navigateShow"
            position="center"
            style="width: 80%; height: 80vh; background: rgba(255, 255, 255, 0.8); box-sizing: border-box; padding: 2vw"
        >
            <div class="navigate-title">祭奠地址</div>
            <div class="navigate-text-1">
                <span style="font-weight: bold">祭奠地址:</span>
                北京市北京市丰台区万丰路
            </div>
            <div class="navigate-text-1">
                <span style="font-weight: bold">祭奠时间:</span>
                2030年12月1日 中午12:00
            </div>
            <div class="navigate-text-1">
                <span style="font-weight: bold">联系电话:</span>
                13246895798
            </div>
            <div class="navigate-text-1" style="display: flex; justify-content: space-around">
                <span style="font-weight: bold; text-decoration: underline" @click="navigateTo('高德')">高德导航</span>
                <span style="font-weight: bold; text-decoration: underline" @click="navigateTo('百度')">百度导航</span>
            </div>
        </van-popup>
        <!-- 修改口令 -->
        <van-popup v-model:show="modifyPwdShow" round position="center" style="width: 80%; height: 50vh">
            <div class="modifyTitle">修改口令</div>
            <van-form @submit="onModifyPwd" class="modifyPwdClass">
                <van-field
                    v-model="pwd.oldPwd"
                    name="oldPwd"
                    class="password"
                    required
                    label="原口令"
                    placeholder="请输入"
                />
                <van-field
                    v-model="pwd.newPwd"
                    name="newPwd"
                    class="password"
                    required
                    label="新口令"
                    placeholder="请输入"
                />
                <van-field
                    v-model="pwd.confirmPwd"
                    name="confirmPwd"
                    class="password"
                    required
                    label="确认口令"
                    placeholder="请输入"
                />
                <div style="width: 60%; margin: 0 auto">
                    <van-button type="primary" native-type="submit" block>保存</van-button>
                </div>
            </van-form>
        </van-popup>
    </div>
</template>

<script setup lang="ts">
    // import { ref, reactive, markRaw, onBeforeMount, nextTick, onBeforeUnmount, watch, getCurrentInstance } from 'vue';
    import type { Ref, Raw } from 'vue';
    // import { useRouter, useRoute } from 'vue-router';
    import {
        showLoadingToast,
        closeToast,
        showSuccessToast,
        showFailToast,
        showDialog,
        showConfirmDialog,
        showImagePreview,
    } from 'vant';
    import { useStore } from '@/store';
    import {
        getHallFriendApi,
        getHallApi,
        updateHallUserApi,
        getGiftInfoApi,
        saveUserGiftApi,
        saveUserInfoApi,
        updatePasswordApi,
        fileUploadBase64,
        getUserInfoApi,
    } from '@/apis';
    import { dateFormatter, generateRandomString64 } from '@/utils';
    const route = useRoute();
    const router = useRouter();
    const store = useStore();

    const defaultAvatar = new URL('@/assets/img/tomb/defaultAvatar.png', import.meta.url).href;
    const grave = new URL(`@/assets/img/tomb/grave-2.png`, import.meta.url).href;
    const form: Ref<any> = ref({
        data: [
            {
                th_id: '', //主键
                th_ex4: '逝者姓名1', //逝者姓名1
                th_ex5: '', //逝者姓名2
                th_ex6: 'https://img2.baidu.com/it/u=2925226694,390810694&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', //逝者头像1 http://www.baidu.com/img/bdlogo.png
                th_ex7: '', //逝者头像2
                // th_ex12:'',//背景图路径
                th_ex16: '', //模板名称，如果为空，则默认为defaultModel
                ispassword: '', //是否需要口令登录
                //注意如果data变量里的ispassword等于Y，则需要弹出输入口令的界面，然后个人馆的其他界面要全部隐藏起来，输入口令后，点提交后需要在发一个接口到后台
            },
        ],
        friend: [
            // {
            // 	thu_ex2:'姓名信息',//昵称
            // 	thu_ex3:'https://img01.yzcdn.cn/vant/cat.jpeg',//头像路径
            // 	thu_id:'',//主键
            // }
        ],
        giftInfo: [
            // {
            // 	thgi_ex1:'恩赐祈福',//礼物内容
            // 	thgi_ex2:'',//礼物类型
            // 	thgi_url:'https://img01.yzcdn.cn/vant/cat.jpeg',//礼物图片
            // 	thgi_dat1:'2020-01-01',//送礼物时间
            // 	name:'用户名称',//用户名称
            // 	img:'https://img01.yzcdn.cn/vant/cat.jpeg',//用户头像
            // }
        ],
        wordsInfo: [],
        user: {
            userid: '', //thu_id
            username: '', //昵称
            userurl: 'https://img01.yzcdn.cn/vant/leaf.jpg', //头像路径
        },
        allGift: [],
        gm_ex27: '', //公墓图
    });
    const msgValue: Ref<string> = ref(''); //留言

    const msgtextArr: Raw<string[]> = markRaw([
        '带着通达的心处世，用包容的心待人，用快乐的心生活，用感恩的心付出，用进取的心坚持。清明节，关爱生命，开心生活，用爱心感染世界!祝你平安!',
        '诉哀伤，诉不尽对你的念想。泪千行，流不尽思念满腔。清明时节来探望，望不尽你在另一头是否一样安好。愿您天堂一切安好。',
        '祭日清明欲泪流，国旗杆半寄春秋。瘟神肆虐千家痛，骨肉离根万户愁。',
        '清明烛火动春愁，欲泪英魂寄野丘。墓地碑前荒小草，青山寂寂尽啼鸠。',
        '长路漫漫心相连，思亲之心永不变。不怕细雨绵绵降，祭奠先人不畏难。一杯清酒墓前洒，滴滴都把问候传。焚香祷告烧纸钱，点点泪花挂腮边。只愿亲人都安康，幸福生活永不变！',
        '轻风绵绵阴雨天，祭祀清明扫墓间。鲜花束束碑前献，敬酒杯杯忆旧年。默默无言烧纸钱，渺渺烟雾荡云端。只愿先人享平安，亲人永远福绵绵。',
        '雨幕茫茫天苍苍，清明时节心惆怅。郊外凉风断人肠，菊花盛开满地伤，扫墓祭祖泪满裳，诚心悼念来焚香。烟雾缭绕上天堂，保佑逝者永安康。',
    ]);
    const prayShow: Ref<boolean> = ref(false);
    const gift: Ref<any[]> = ref([
        // {
        // 	thg_ex1:'恩赐祈福',//礼物名称
        // 	thg_ex2:'https://img01.yzcdn.cn/vant/cat.jpeg',//礼物图片
        // 	thg_ex5:'',//类型
        // 	thg_id:'',//礼物主键
        // }
    ]);
    const messageShow: Ref<boolean> = ref(false);
    const message2Show: Ref<boolean> = ref(false);
    const friendShow: Ref<boolean> = ref(false);
    const modifyShow: Ref<boolean> = ref(false);
    const imgsrc: Ref<string> = ref('');
    const fileList: Ref<any[]> = ref([
        {
            url: 'https://img01.yzcdn.cn/vant/cat.jpeg',
            status: 'done',
            message: '上传完成',
        },
    ]);

    const setShow: Ref<boolean> = ref(false);
    const inviteShow: Ref<boolean> = ref(false);
    const navigateShow: Ref<boolean> = ref(false);
    const modifyPwdShow: Ref<boolean> = ref(false);
    const pwd = ref({
        oldPwd: '',
        newPwd: '',
        confirmPwd: '',
    });

    const myInterval: Ref<any> = ref('');
    const isSetShow: Ref<boolean> = ref(false);

    const showData = reactive({
        prayShow,
        messageShow,
        friendShow,
        setShow,
        inviteShow,
        navigateShow,
        modifyShow,
        modifyPwdShow,
    });
    watch(
        [() => route.query.th_id],
        (nVal, oVal) => {
            console.log(nVal);
            if (!localStorage.getItem('randomString64')) {
                let randomString64 = generateRandomString64();
                localStorage.setItem('randomString64', randomString64);
            }
            store.openid = localStorage.getItem('randomString64');
            store.openid =
                'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJ1c2VySWQ6MTM0NHx1c2VyTmFtZTrnrqHnkIblkZh8cHJvdmluY2U6fGNpdHk6fGFyZWE6fHN0b25lOnx2aWxsYWdlOnxncm91cDp8Y29tcGFueTpDU0JaU09GVFYzfHJvbGVOYW1lOueuoeeQhuWRmHxyb2xlSWQ6Mjc5fGR3OjEzfGR3VHlwZTp8dXJsOi9ieWcvdGFiTWFpbj9maWxlbmFtZT3nlLXohJHnq6_ns7vnu58maXNEZXNrdG9wPVkmaXNEZXNrdG9wTmV3PVl8Y2VtZXRlcnk6fGRlcGFydDo3MXxjb21wYW55X2RlcGFydDp8c0NvZGU6aHh0YnlnfHpsYlVzZXJpZDp8emxiVXNlck5hbWU6fHpsYlVzZXJUZWw6fHpsYlVzZXJpZGV4OnxtaWQ6fGlzTWFpbjpOfG1haW5JZDoxMzQ0fGlzU3VwZXI6fGNsaWVudElkOnxhY2NvdW50OmdseTAxfHNvZnROYW1lOkNTQlpTT0ZUVjMiLCJleHAiOjE3NTAyMzYwMjksImlhdCI6MTc1MDE0OTYyOX0.WbkP5SfzgGar-qvQmQltT3XdM6aYFs_qdjv3xyIKzTg';
            if (nVal[0]) {
                console.log(route.query.th_id);
                getHallApi({
                    hallId: route.query.th_id, //th_id
                    // thgi_company: '连云港人文纪念园智慧陵园管理系统',
                }).then((res: any) => {
                    console.log(res);
                    form.value = res;
                    imgsrc.value = res.user.userurl;
                    fileList.value = [
                        {
                            url: res.user.userurl,
                            status: 'done',
                            message: '上传完成',
                        },
                    ];

                    nextTick(() => {
                        textSlide();
                    });
                });
                // 祈福
                getGiftInfoApi().then((res: any) => {
                    console.log(res.data);
                    gift.value = res.data;
                });

                // 设置修改权限
                // getUserInfoApi({
                //     data: JSON.stringify({
                //         th_id: route.query.th_id,
                //     }),
                // })
                //     .then((res: any) => {
                //         if (res.status == '+OK') {
                //             isSetShow.value = true;
                //         }
                //     })
                //     .catch((err) => {});
            }
        },
        {
            immediate: true,
        }
    );
    onBeforeUnmount(() => {
        clearInterval(myInterval.value);
    });

    const textSlide = () => {
        // 显示区域高度
        const boxDom: any = document.getElementsByClassName('slide-wrapper')[0];
        // 获取当前列表ul
        let ulDom: any = document.getElementsByClassName('slide-container')[0];
        // 获取当前lis
        const liDoms = document.getElementsByClassName('slide-item');
        console.log(document.getElementsByClassName('slide-item'));
        // 单个移动的元素的高度
        // const maxL = liDoms[0].offsetHeight
        let maxL = ulDom.offsetHeight;
        console.log('当前元素', ulDom, liDoms, maxL);
        let startL = 0;
        // 移动方法
        const moveLi = () => {
            ulDom = document.getElementsByClassName('slide-container')[0];
            maxL = ulDom.offsetHeight;
            startL++;
            // console.log('startL:---'+startL)
            if (startL >= maxL) {
                startL = -boxDom.offsetHeight;
                // let tempData = [...this.form.giftInfo]//深拷贝数据数组
                // const tempLi = tempData.splice(0, 1)//当第一个li完全移出当前列表截取第一个数据
                // tempData.push(...tempLi)//将被截取出去的li的数据放到数组最后一位
                // this.form.giftInfo = tempData
                // console.log('gggggggggggggggggggggggg')
            }
            if (startL > 0) {
                ulDom.style.top = '-' + startL + 'px'; //上移高度
            } else {
                ulDom.style.top = -startL + 'px'; //上移高度
            }

            // console.log('ulDom.style.top:---'+ulDom.style.top)
        };
        myInterval.value = setInterval(moveLi, 30);
    };
    const open = (val, val2) => {
        showData[val] = true;
        if (val2) {
            showData[val2] = false;
        }
        if (val == 'friendShow') {
            getHallFriendApi({
                hallId: route.query.th_id,
            }).then((data: any) => {
                form.value.friend = data.friend;
            });
        } else if (val == 'messageShow') {
            messageScrollToBottom();
        }
    };
    // 保存祈福礼物
    const saveGift = (val: any) => {
        saveUserGiftApi({
            data: JSON.stringify({
                thgi_hallid: route.query.th_id, //纪念馆id
                thgi_mainid: val.thg_id,
                thgi_ex1: val.thg_ex1,
                thgi_ex2: val.thg_ex2,
                thgi_ex3: '微信',
                type: 'G',
                th_company: '连云港人文纪念园智慧陵园管理系统',
            }),
        }).then((res: any) => {
            if (res.status == '+OK') {
                getHallApi({
                    hallId: route.query.th_id, //th_id
                    thgi_company: '连云港人文纪念园智慧陵园管理系统',
                }).then((res) => {
                    form.value = res;
                });
            }
        });
        prayShow.value = false;
    };

    const sendMsg1 = (val: any) => {
        if (val) {
            // 调接口
            form.value.wordsInfo.push({
                thgi_ex2: val, //留言内容
                thgi_dat1: dateFormatter(new Date()), //留言时间
                name: form.value.user.username, //用户名称
                img: form.value.user.userurl, //用户头像
            });
            saveUserGiftApi({
                data: JSON.stringify({
                    thgi_ex2: val, //留言内容
                    th_company: '连云港人文纪念园智慧陵园管理系统',
                    thgi_hallid: route.query.th_id, //纪念馆id
                    thgi_mainid: 0,
                }),
            });
        }
        msgValue.value = '';
    };
    const sendMsg2 = (val: any) => {
        if (val) {
            message2Show.value = false;
            form.value.giftInfo.push({
                thgi_ex1: '留言',
                thgi_ex2: val, //留言内容
                thgi_dat1: dateFormatter(new Date()), //留言时间
            });
            messageScrollToBottom();
            saveUserGiftApi({
                data: JSON.stringify({
                    thgi_ex1: '留言',
                    thgi_ex2: val, //留言内容
                    th_company: '连云港人文纪念园智慧陵园管理系统',
                    thgi_hallid: route.query.th_id, //纪念馆id
                    thgi_mainid: 0,
                }),
            });
        }
    };
    // 留言滚动到最下面一条
    const messageScrollToBottom = () => {
        nextTick(() => {
            console.log(document.getElementsByClassName('message-class')[0]);
            let messageIdDom: any = document.getElementsByClassName('message-class')[0];
            let maxL = messageIdDom.scrollHeight;
            let height = messageIdDom.offsetHeight;
            console.log(maxL);
            console.log(height);
            messageIdDom.scrollTop = maxL - height;
        });
    };
    const onSubmit1 = (val: any) => {
        showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            duration: 0,
        });
        console.log('submit', val);
        saveUserInfoApi({
            data: JSON.stringify({
                name: form.value.user.username,
                img: form.value.user.userurl,
                thu_hallid: route.query.th_id,
            }),
        })
            .then((res: any) => {
                if (res.status == '+OK') {
                    showSuccessToast(res.msg);
                    getHallApi({
                        hallId: route.query.th_id, //th_id
                        thgi_company: '连云港人文纪念园智慧陵园管理系统',
                    }).then((res) => {
                        console.log(res);
                        form.value = res;
                    });
                } else {
                    showFailToast(res.msg);
                }
                modifyShow.value = false;
            })
            .catch((err) => {
                modifyShow.value = false;
                showFailToast('保存失败');
            });
    };
    const afterRead = (filed1, filed2) => {
        return (file) => {
            file.status = 'uploading';
            file.message = '上传中...';
            fileUploadBase64(file.content)
                .then((res: any) => {
                    file.status = 'done';
                    file.message = '上传成功';
                    form.value[filed1][filed2] = res.url;
                })
                .catch((err) => {
                    file.status = 'failed';
                    file.message = '上传失败';
                });
        };
    };
    const afterReadAvatar = (filed) => {
        return (file) => {
            file.status = 'uploading';
            file.message = '上传中...';
            fileUploadBase64(file.content)
                .then((res: any) => {
                    file.status = 'done';
                    file.message = '上传成功';
                    form.value.data[0][filed] = res.url;
                })
                .catch((err) => {
                    file.status = 'failed';
                    file.message = '上传失败';
                });
        };
    };
    const beforeDelete = (filed1, filed2) => {
        return (file, name) => {
            form.value[filed1][filed2] = '';
            return true;
        };
    };
    // 修改口令
    const onModifyPwd = (val) => {
        if (val.newPwd && val.newPwd == val.confirmPwd) {
            console.log(1);
            showLoadingToast({
                message: '加载中...',
                forbidClick: true,
                duration: 0,
            });
            updatePasswordApi({
                hallId: route.query.th_id,
                oldpwd: val.oldPwd,
                newpwd: val.newPwd,
                msg: '口令',
            })
                .then((res: any) => {
                    pwd.value.oldPwd = '';
                    pwd.value.newPwd = '';
                    pwd.value.confirmPwd = '';
                    console.log(res.status);
                    if (res.status == '+OK') {
                        showSuccessToast(res.msg);
                    } else {
                        showFailToast(res.msg);
                    }
                    modifyPwdShow.value = false;
                })
                .catch((err) => {
                    showFailToast('保存失败');
                    modifyPwdShow.value = false;
                });
        } else {
            showFailToast('两次口令不一致！');
        }
    };
    const navigateTo = (val: string) => {
        if (val == '高德') {
            // location.href = `https://uri.amap.com/marker?position=111.760525,40.843319&name=公墓标题&src=cs&coordinate=gaode&callnative=0`;
            location.href = `https://uri.amap.com/marker?position=${this.navigationContent.latitude},${this.navigationContent.longitude}&name=${this.navigationContent.cemetery}&src=cs&coordinate=gaode&callnative=0`;
        } else if (val == '百度') {
            location.href = `http://api.map.baidu.com/marker?location=${this.navigationContent.latitude},${this.navigationContent.longitude}&title=${this.navigationContent.cemetery}&content=${this.navigationContent.cemetery}&output=html&src=webapp.cs.openBaiduMap`;
        }
    };
</script>

<style lang="scss" scoped>
    .tombMain::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        // background-color: rgba(100,100,100,0.5);
        background: url(@/assets/img/tomb/tomb-bg-2.png);
        filter: blur(30px);
        z-index: -1;
    }
    .tombMain {
        background: url(~@/assets/img/tomb/grave-2.png);
        background-size: 100% 100%;
        width: 100vw;
        height: 100vh;
        // display: inline-block
    }
    .avatar {
        width: 30vw;
        height: 40vw;
        margin: 0 5vw;
        margin-top: 45vw;
        border: 1px solid #8f5d00;
    }
    .avatar img {
        width: 100%;
        height: 100%;
    }
    .name-text {
        width: 30vw;
        // height: 30vw;
        margin: 0 5vw;
        margin-top: 18vw;
        // display: flex;
        // justify-content: space-between;
    }
    .name-text-1 {
        /* writing-mode: vertical-lr; */
        /* width: 5vw; */
        width: 100%;
        line-height: 30px;
        text-align: center;
        color: #647b44;
        font-weight: bold;
        font-size: 16px;
        text-shadow: 0.53333vw 0.53333vw 1.33333vw #ffc4c4;
    }
    .name-text-2 {
        width: 100%;
        line-height: 30px;
        text-align: center;
        color: #647b44;
        font-weight: bold;
        font-size: 20px;
        text-shadow: 0.53333vw 0.53333vw 1.33333vw #ffc4c4;
    }
    .name-text-3 {
        width: 100%;
        line-height: 30px;
        text-align: center;
        color: #647b44;
        font-weight: bold;
        font-size: 16px;
        text-shadow: 0.53333vw 0.53333vw 1.33333vw #ffc4c4;
    }
    .title-text {
        position: absolute;
        top: 150px;
        left: 5%;
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        writing-mode: vertical-lr;
        color: #647b44;
        font-size: 20px;
        letter-spacing: 10px;
        font-weight: bold;
        text-shadow: 0.53333vw 0.53333vw 1.33333vw #ffc4c4;
    }
    footer {
        width: 100%;
        position: absolute;
        bottom: 0;
        height: 30vw;
        display: flex;
        justify-content: space-around;
    }
    .tabbarItem {
        background-color: rgba(0, 0, 0, 0.3);
        // margin: 8vw;
        // padding: 1vw;
        // font-size: 4vw;
        // border-radius: 50%;
        width: 50px;
        height: 50px;
        margin: 24px;
        padding: 3px;
        font-size: 18px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        color: #ffffff;
    }
    .tabbarItem > img {
        width: 50%;
        height: 50%;
    }
    .set {
        position: absolute;
        top: 5vw;
        right: 5vw;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        width: 12vw;
        height: 12vw;
        /* display: flex;
		justify-content: center;
		align-items: center; */
    }
    .set img {
        margin: 25%;
        width: 50%;
        height: 50%;
    }
    .invite {
        position: absolute;
        top: 5vw;
        right: 5vw;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        width: 12vw;
        height: 12vw;
        box-sizing: border-box;
        padding: 10px;
        /* display: flex;
		justify-content: center;
		align-items: center; */
    }
    .invite img {
        margin: 25%;
        width: 50%;
        height: 50%;
    }
    .navigate {
        position: absolute;
        top: 20vw;
        right: 5vw;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        width: 12vw;
        height: 12vw;
        box-sizing: border-box;
        padding: 10px;
        /* display: flex;
		justify-content: center;
		align-items: center; */
    }
    .navigate img {
        margin: 25%;
        width: 50%;
        height: 50%;
    }
    .prayClass {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .prayItem {
        width: 20vw;
        height: 25vw;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .prayItem img {
        width: 10vw;
        height: 15vw;
    }
    .giftList {
        width: 100%;
        height: 40vh;
        position: absolute;
        bottom: 15vh;
        /* background-color: #007400; */
        overflow: auto;
    }
    .giftInfo {
        display: flex;
        align-items: center;
        margin: 0 0 5vw 1vw;
        color: #ffffff;
    }
    .giftInfoImg1,
    .giftInfoImg2 {
        width: 6vw;
        height: 6vw;
    }
    .giftInfoFont {
        margin: 0 2vw;
    }
    .messageClass {
        display: flex;
        align-items: center;
        margin-left: 2vw;
        margin-top: 2vw;
        margin-bottom: 5vw;
    }
    .messageImg1 {
        width: 10vw;
        height: 10vw;
        margin-right: 2vw;
    }
    .messageImg2 {
        width: 10vw;
        height: 10vw;
        margin-right: 2vw;
    }
    .messageContent {
        /* display: flex; */
        margin-left: 2vw;
    }
    .messageGift {
        display: flex;
        align-items: center;
        color: #342c31;
    }
    .friendClass {
        display: flex;
        flex-wrap: wrap;
    }
    .friendContent {
        width: 18vw;
        height: 18vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-left: 2vw;
        margin-top: 2vw;
        margin-bottom: 2vw;
        color: #7f7c58;
    }
    .friendImg {
        width: 10vw;
        height: 10vw;
    }
    .modifyTitle {
        font-weight: bold;
        text-align: center;
        margin-top: 10vw;
        margin-bottom: 10vw;
    }

    .modifyPwdClass .van-cell {
        margin-bottom: 3vw;
    }

    /* 自动滚动 */
    .list-dome-box {
        width: 100%;
        height: 40vh;
        position: absolute;
        bottom: 15vh;
        overflow: hidden;
    }
    .slide-wrapper {
        position: relative;
        /* margin-top: 10%; */
        width: 100%;
        /* height: 2rem; */
        height: 40vh;
        overflow: hidden;
        /* background-color: bisque; */
    }
    .slide-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .slide-item {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin: 0 0 5vw 1vw;
        color: #ffffff;
        text-shadow: 0 0 5px black;
    }

    .msgbox {
        width: 100%;
        height: 50px;
    }
    .msgPosition {
        position: fixed;
        bottom: 0px;
    }
    .msgbtn {
        text-align: left;
        text-indent: 20px;
        margin-bottom: 5px;
        padding: 28px 0;
        background: url(@/assets/img/tomb/messageBoard.png);
        background-size: 120% 315%;
        background-position: 77%;
        color: #342c31;
        height: 80px;
    }
    ::v-deep(.password .van-field__control) {
        -webkit-text-security: disc;
        text-security: disc;
    }
    .invite-title {
        font-size: 30px;
        color: #647b44;
        padding-top: 20px;
        padding-bottom: 10px;
        border-bottom: 5px solid #647b44;
    }
    .invite-text-1 {
        padding-top: 10px;
        text-align: left;
        line-height: 30px;
        color: #647b44;
    }
    .invite-text-2 {
        text-align: left;
        line-height: 30px;
        text-indent: 30px;
        color: #647b44;
    }
    .navigate-title {
        font-size: 30px;
        color: #647b44;
        padding-top: 20px;
        padding-bottom: 10px;
        border-bottom: 5px solid #647b44;
    }
    .navigate-text-1 {
        padding-top: 10px;
        text-align: left;
        line-height: 30px;
        color: #647b44;
    }
    .navigate-text-2 {
        text-align: left;
        line-height: 30px;
        text-indent: 30px;
        color: #647b44;
    }
</style>
